<template>
	<div class="body-hp" style="overflow-y:auto;" id="body-hp">
		<HeaDer></HeaDer>
		<div class="first flex" style="background-color:#F8F9FB">
			<div style="font-size: 18rem;
			color: #617184;
			margin-right: 10rem;
			display: flex;
			justify-content: center;
			align-items: center;">
				当前位置:
			</div>
			<el-breadcrumb separator-class="el-icon-arrow-right" style="display: flex;
			justify-content: center;
			align-items: center;color:#617184">
				<el-breadcrumb-item to="/hp">首页</el-breadcrumb-item>
				<el-breadcrumb-item to="/enrollmentlist"> 入驻企业</el-breadcrumb-item>
				<el-breadcrumb-item>{{ enterpriseName }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="flex center second">
			<!-- 左 -->
			<div>
				<div>
					<el-descriptions :title="enterpriseName">
					</el-descriptions>
				</div>
				<div class="forthf">
					<div class="forths">企业简介</div>
					<img src="../../assets/images/jianshili/111.png" style="width:80rem">
					<div class="fortht">
						{{ enterpriseCompanyProfile == null ? '暂无介绍' : enterpriseCompanyProfile }}
					</div>
				</div>
				<div class="forthf">
					<div class="forths">经营范围</div>
					<img src="../../assets/images/jianshili/111.png" style="width:80rem">
					<div class="fortht">
						{{ enterpriseBusinessScope == null ? '暂无介绍' : enterpriseBusinessScope }}
					</div>
				</div>
				<div style="margin-bottom:20px;margin-top:20px">
					<div class="bgggs">
						<div class="bggfs">荣誉资质信息</div>
						<div class="imgs-en" style="align-items: center;margin-top:50px"
							v-if="managementList.length > 0">
							<div class="box-en" v-for="item in             managementList            ">
								<img :src="item.fileUrl" v-if='item.fileUrl != null && item.fileUrl != ""'
									:title="item.name" @click=" handlePictureCardPreview(item.fileUrl)">
								<img :src="honorUrl" v-else :title="item.name"
									@click="handlePictureCardPreview(honorUrl)">
							</div>
						</div>
						<el-empty :image-size="200" v-if="managementList.length == 0"></el-empty>
					</div>
				</div>
			</div>
			<!-- 右 -->
			<div class="thrid" style="margin-bottom:20px">
				<img :src="logoUrl" style="width:380rem;height:247rem;margin-bottom:40px"
					@click="handlePictureCardPreview(logoUrl)">
				<div style="margin-bottom:20px">
					<div class="bgg">
						<div class="bggf">企业信息</div>
						<div style="margin-bottom:10rem;font-size: 13px;">
							企业名称: {{ enterpriseName }}
						</div>
						<div style="margin-bottom:10rem;font-size: 13px;">
							企业性质: {{ formatterNature(enterpriseNature) }}
						</div>
						<div style="margin-bottom:10rem;font-size: 13px;">
							所属行业: {{ formatterIndustry(enterpriseIndustry) }}
						</div>

						<div style="margin-bottom:10rem;font-size: 13px;">
							所在地址: {{ enterpriseAddress }} </div>
					</div>
				</div>
				<div style="margin-bottom:50px">
					<div class="bggg">
						<div class="bggf">营业执照</div>
						<div style="display: flex;justify-content: center;align-items: center;margin-top:30px">
							<img :src="businessUrl" style="width:360rem;height:209rem;margin-bottom:20px"
								@click="handlePictureCardPreview(businessUrl)">
						</div>
					</div>
				</div>
			</div>
		</div>
		<FooTer></FooTer>
		<el-dialog :visible.sync="dialogVisible" append-to-body>
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
		<el-dialog :visible.sync="dialogVisiblePdf" append-to-body>
			<pdf v-for="                  item                   in                   pageTotal                  "
				:src="pdfUrl" :key="item" :page="item">
			</pdf>
		</el-dialog>
	</div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import { getDept } from "@/api/system/dept";
import pdf from 'vue-pdf';
import { listHonorManagementOrgId } from "@/api/honor/management";
export default {
	name: "body-hp",
	dicts: ['enterprise_nature', 'customer_industry'],
	data() {
		return {
			pageTotal: null,
			dialogImageUrl: '',
			dialogImageUrlPdf: '',
			dialogVisible: false,
			dialogVisiblePdf: false,
			honorUrl: require('../../assets/images/iso9001.jpg'),
			logoUrl: "",
			managementList: [],
			businessUrl: "",
			enterpriseName: "",
			enterpriseNature: "",
			enterpriseIndustry: "",
			enterpriseAddress: "",
			enterpriseCompanyProfile: "",
			enterpriseBusinessScope: "",
			queryParams: {
				status: null,
				organizationId: null
			},
		};
	},
	components: {
		HeaDer,
		FooTer,
		pdf

	},
	methods: {
		getHonorList() {
			this.queryParams.organizationId = this.newId;
			this.queryParams.status = "0";
			listHonorManagementOrgId(this.queryParams).then(response => {
				this.managementList = response.rows;
				console.log(this.managementList)
			});
		},
		getDeptInfo() {
			let id = this.newId;
			getDept(id).then(response => {
				this.enterpriseName = response.data.deptName;
				this.enterpriseCompanyProfile = response.data.companyProfile;
				this.enterpriseBusinessScope = response.data.businessScope;
				this.enterpriseIndustry = response.data.industry;
				this.enterpriseAddress = response.data.address;
				this.enterpriseNature = response.data.nature;
				if (response.data.url == null || response.data.url == "") {
					this.logoUrl = require('../../assets/images/pl-img_16.jpg');
				} else {
					this.logoUrl = response.data.url;
				}
				if (response.data.fileUrl == null || response.data.fileUrl == "") {
					this.businessUrl = require('../../assets/images/pl-img_14.jpg');
				} else {
					this.businessUrl = response.data.fileUrl;
				}
			});
		},
		tab_mouseEnter(e) {
			e.target.className = "on";
		},
		tab_mouseLeave(e) {
			e.target.className = "";
		},
		formatterIndustry(value) {
			var type = "";
			this.dict.type.customer_industry.forEach(item => {
				if (item.value == value)
					type = item.label;
			});
			return type;
		},
		formatterNature(value) {
			var type = "";
			this.dict.type.enterprise_nature.forEach(item => {
				if (item.value == value)
					type = item.label;
			});
			return type;
		},
		handlePictureCardPreview(url) {
			this.dialogImageUrl = url;
			this.dialogVisible = true;
		},
		handlePictureCardPreviewPdf(url) {
			this.pdfUrl = pdf.createLoadingTask(url)
			// 获取页码
			this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {
			})
			this.dialogImageUrlPdf = url;
			this.dialogVisiblePdf = true;
		}

	},
	created() {
		this.newId = this.$route.params.deptId;
		this.getDeptInfo();
		this.getHonorList();
	},
}
</script>

<style lang="scss" scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

.flex {
	display: flex;
}

.center {
	display: flex;
	justify-content: space-around
}

.main-pl {
	width: 100%;
	padding-bottom: 66rem;
}

.main-pl>.row-pl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-bottom: 50rem;
}

.main-pl li {
	width: 49%;
	height: 176rem;
	background: url(../../assets/images/pl-bg1_03.jpg) no-repeat scroll;
	background-size: 100% 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding-left: 18rem;
	padding-right: 30rem;
	margin-bottom: 33rem;
}

.main-pl li>.left-pl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}

.main-pl li>.left-pl>img {
	width: 82rem;
	height: 120rem;
}

.main-pl li>.right-pl {
	padding-top: 20rem;
	padding-left: 15rem;
}

.main-pl li>.right-pl>.title-pl {
	font-size: 18rem;
	margin-bottom: 15rem;
}

.main-pl li>.right-pl>.content-pl {
	overflow-y: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 14rem;
	margin-bottom: 30rem;
}

.main-pl li>.right-pl>.bottom-pl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	font-size: 14rem;
}

.main-pl li>.right-pl>.bottom-pl>button {
	font-size: 14rem;
	color: #35a266;
	border: solid 1px #35a266;
	background-color: white;
	padding: 4rem 15rem;
	cursor: pointer;
}

.main-pl li>.right-pl>.bottom-pl>.left-pl>span {
	background-color: #e6e8f3;
	color: #62667d;
	padding: 2rem 12rem;
	margin-right: 10rem;
}

.main-pl li>.right-pl>.bottom-pl>.left-pl>span.color-gold {
	background-color: #f0eedb;
}

.main-pl li>.right-pl>.bottom-pl>.left-pl>i {
	background-color: #ebfff4;
	color: #087d40;
	padding: 2rem 12rem;
	font-style: normal;
	width: 130px;
	/* 限制文本容器的宽度 */
	white-space: nowrap;
	/* 保持文本在一行内显示 */
	overflow: hidden;
	/* 隐藏溢出的文本 */
	text-overflow: ellipsis;
	/* 显示省略符号来表示文本被截断 */
	font-size: 14rem;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
	color: #35a266;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #35a266;
}

// 没有实现
::v-deep .main-pl li>.right-pl>.bottom-pl>.left-pl>i {
	width: 140px !important;
	display: inline-block;
}

::v-deep .main-pl li>.right-pl>.bottom-pl>.left-pl {
	display: flex;
	align-items: center;
}

.bg {
	background: url(../../assets/images/jianshili/xq_03.png) no-repeat scroll;
	background-size: 100%
}

.bgg {
	background: url(../../assets/images/jianshili/xq_06.png) no-repeat scroll;
	background-size: 100%;
	width: 410rem;
	height: 240rem;
	padding: 10rem;

	.bggf {
		color: #fff;
		margin-bottom: 40px;
		font-size: 20rem
	}
}

.bggg {
	background: url(../../assets/images/pl-img_13.jpg) no-repeat scroll;
	background-size: 100%;
	width: 410rem;
	height: 319rem;
	padding: 10rem;

	.bggf {
		color: #fff;
		margin-bottom: 40px;
		font-size: 20rem;
	}
}

.bgggs {
	background: url(../../assets/images/pl-img_15.jpg) no-repeat scroll;
	background-size: 100%;
	width: 1070rem;
	// height: 452rem;
	padding: 10rem;
	margin-bottom: 60rem;

	.bggfs {
		color: #fff;
		margin-bottom: 40px;
		font-size: 20rem;
	}
}

.bgg2 {
	background: url(../../assets/images/jianshili/xq-img_03.png) no-repeat scroll;
	background-size: 100%;
	width: 410rem;
	height: 194rem;
	padding: 10rem;
	margin-top: 40rem;

	.bgg2f {
		color: #fff;
		margin: 30px 0px 10px 10px;
		font-size: 30rem;
	}
}

.first {
	width: 100%;
	// border-bottom:5px solid #F0F0F0;
	padding: 20rem 20rem 20rem 200rem;
}

.second {
	margin-left: auto;
	margin-right: auto;
	width: 1532rem;
	padding: 5rem;
	margin-top: 30rem;
	margin-bottom: -50rem;
}

.thrid {
	.thridf {
		width: 410rem;
		height: 198rem;
		padding: 10rem;

		// margin-bottom:40px;
		.thrids {
			color: #fff;
			margin-bottom: 40px;
			font-size: 20rem;
		}

		.thridt {
			margin-bottom: 10rem;
		}
	}
}

.forthf {
	margin: 30rem 50rem 0rem 0rem;

	.forths {
		font-weight: bold;
		color: #1E1E1E;
		font-size: 20rem;
	}

	.fortht {
		color: #1E1E1E;
		font-size: 17rem;
		line-height: 35rem;
		text-indent: 2em;
	}
}

.forth {
	display: flex;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
	width: 1532rem;
	padding: 5rem;
	margin-top: 30rem;
}

.fif {
	margin-left: auto;
	margin-right: auto;
	width: 1532rem;
	padding: 5rem;
	// margin-top:30rem;
	margin-bottom: 30rem;

	.fiff {
		color: #1E1E1E;
		font-size: 17rem;
		margin-bottom: 10px;
		margin-bottom: 20px;
	}

	.fifs {
		background-color: #EEF4F0;
		width: 1100rem;
		padding: 20rem;
		color: #90C5A6;
		font-size: 17rem;
	}
}

/* 头尾公共样式 */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote，th,
td {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

.el-menu.el-menu--horizontal {
	border-bottom: none;
}

.el-menu--horizontal>.el-menu-item.is-active {
	border-bottom: 3rem solid #33b843;
	color: #33b843;
}

.el-menu--horizontal>.el-menu-item {
	height: 52rem;
	line-height: 52rem;
	font-size: 22rem;
	font-weight: 600;
	color: #262827;
	padding: 0 4rem;
	margin: 0 20rem;
	font-size: 20rem;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
	color: #33b843;
}

.top-hp {
	height: 96rem;
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	background-color: white;
}

.logo-hp {
	height: 45rem;
	margin-top: 10rem;
}

.logo-hp img {
	height: 100%;
}

.row-hp {
	width: 1532rem;
	margin: auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.top-right-hp {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

}

.top-right-hp .btn-hp {
	background: none;
	border: none;
	cursor: pointer;
}

.footer-hp {
	width: 100%;
	/* height:285rem; */
	background-color: #000105;
	color: white;
}

.footer-main-hp {
	width: 1532rem;
	margin: auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	font-size: 16rem;
	padding-right: 95rem;
	padding-top: 34rem;
	padding-bottom: 50rem;
}

.footer-main-hp>.right-hp>b {
	font-size: 16rem;
	display: block;
	margin-bottom: 11rem;
	color: #cdcdcd;
}

.footer-main-hp>.left-hp>p {
	line-height: 24rem;
	color: #adadad;
}

.footer-main-hp>.left-hp>p>a {
	color: #adadad;
}

.footer-main-hp>.right-hp>p {
	line-height: 31rem;
}

.footer-main-hp>.right-hp>p>a {
	color: #adadad;
}

.el-divider {
	background-color: #292e31;
}

.bottom-line-hp {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 16rem;
	color: #aaaaaa;
}

.bottom-line-hp>span {
	display: inline-block;
	width: 100%;
	height: 50rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 头尾公共样式 end */
/* 回到顶部 */
.toTop-hp {
	width: 78rem;
	position: fixed;
	right: 9rem;
	bottom: 328rem;
	z-index: 100;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
}

.toTop-hp>li {
	width: 78rem;
	height: 78rem;
	background-color: black;
	margin-bottom: 8rem;
}

.toTop-hp>li.li-enter-leave>.erweima-hp {
	width: 100%;
	height: 100%;
}

.toTop-hp>li.li-enter-leave>.erweima-hp>.content-hp {
	width: 192rem;
	height: 100%;
	background-color: #26a740;
}

.toTop-hp>li.li-enter-leave.on>.erweima-hp {
	display: block;
	/* animation:move2 .3s ease-in-out forwards; */
	transform: translate(10rem, 0);
	opacity: 1;
}

.toTop-hp>li.li-enter-leave.on2>.erweima-hp {
	display: block;
}

::v-deep #app-hp [class^=el-icon-] {
	display: none;
}

/* 回到顶部 end*/
.body-hp {
	height: 100%;
	width: 100%;
	/* font: 14rem arial; */
	font-size: 14rem;
	font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif;
	color: #676767;
}

.banner-hp {
	width: 100%;
	height: 607rem;
	background-color: #eee;
}

.top-content-hp {
	width: 100%;
	height: 141rem;
	position: relative;
	background-color: white;
	box-shadow: 8rem 8rem 12rem rgba(230, 230, 230, .8);
	margin-top: -49rem;
}

.top-content-hp::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	box-shadow: -2rem 8rem 12rem rgba(230, 230, 230, .8);
}

.txt-center-hp {
	width: 100%;
	height: 170rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.columns-tab-hp {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	margin-bottom: 90rem;
}

.columns-tab-hp>li {
	height: 453rem;
	width: 320rem;
	position: relative;
	background-color: #f4f7fc;
	border-radius: 10rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 44rem;
	cursor: pointer;
}

.columns-tab-hp>li>img {
	width: 172rem;
	height: 182rem;
}

.columns-tab-hp>li>.bottom-hp {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40rem;
	background-color: #26a740;
	border-bottom-left-radius: 10rem;
	border-bottom-right-radius: 10rem;
	font-size: 16rem;
	color: white;
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: 0 15rem 0 39rem;
}

.columns-tab-hp>li.on {
	background-color: white;
	animation: move .2s ease-in-out forwards;
}

.columns-tab-hp>li.on::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	box-shadow: -6rem 0 14rem rgba(230, 230, 230, .5);
}

.columns-tab-hp>li.on::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	box-shadow: 6rem 0 14rem rgba(230, 230, 230, .5);
}

.columns-tab-hp>li.on>.bottom-hp {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

.columns-tab-hp>li>.bottom-hp>i {
	transform: rotateY(180deg) rotateZ(-90deg);
}

.columns-tab-hp>li>dl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 34rem;
	padding-right: 34rem;
}

.columns-tab-hp>li>dl>dt {
	padding: 34rem 0 30rem;
	font-size: 26rem;
}

.columns-tab-hp>li>dl>dd {
	font-size: 16rem;
}

@keyframes move {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(0, -5rem);
	}
}

@keyframes move2 {
	0% {
		display: block;
		transform: translate(0, 0);
		opacity: 0;
	}

	100% {
		transform: translate(30rem, 0);
		opacity: 1;
	}
}

@keyframes move3 {
	0% {
		transform: translate(30, 0);
		opacity: 1;
	}

	100% {
		transform: translate(0, 0);
		opacity: 0;
		display: none;
	}
}

.banner2-hp {
	width: 100%;
	height: 601rem;
	background-color: #eee;
}

.moreServices-hp {
	height: 498rem;
	width: 100%;
}

.imgs-en {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}

.imgs-en>.box-en {
	width: 320rem;
	height: 320rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	background-color: #eee;
	align-items: center;
	justify-content: center;
	margin-bottom: 24rem;
	margin-left: 12rem;
	margin-right: 12rem
}

.imgs-en>.box-en>img {
	max-width: 320rem;
	max-height: 320rem;
}
</style>